import React from 'react';
import { Space as AntdSpace } from 'antd';
import type { SpaceProps as AntdSpaceProps } from 'antd';
import { createStyles } from 'antd-style';

export interface SpaceProps extends AntdSpaceProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  space: css`
    display: inline-flex;
  `,
}));

const SpaceComponent: React.FC<SpaceProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const spaceClassName = cx(
    className,
    customClassName,
    styles.space
  );

  return <AntdSpace className={spaceClassName} {...restProps} />;
};

// 创建复合组件
type SpaceType = typeof SpaceComponent & {
  Compact: typeof AntdSpace.Compact;
};

const Space = SpaceComponent as SpaceType;

// 导出子组件
Space.Compact = AntdSpace.Compact;

export { Space };
export default Space;

